<!DOCTYPE html>
<html>
  <head>
    <title>Rhizosphere :: Launcher</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="google-site-verification" content="{{ google_site_verification }}" />
    <style type="text/css" media="screen">
      body {
        background-image: -webkit-gradient(linear, 0 0, 0 50, from(#d3dcf5), to(#ebeff9));
        background-image: -moz-linear-gradient(-90deg, #d3dcf5 0px, #ebeff9 50px, #ebeff9 100%);
        background-repeat:  no-repeat;
        background-color: #ebeff9;
      }

      .contents {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background: #fff;
        border: 1px solid #6b90da;
        padding: 0 1em;
        margin-bottom: 10px;
      }

      .detail-contents {
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        background: #f0f7f9;
        border: 1px solid #BAE0EB;
        display: none;
        margin-left: 132px;
      }

      * {
        font-family: sans-serif;
      }

      .carousel-description {
        display: none;
        margin: 0 0 0 40px;
        padding-top: 10px;
      }

      .carousel-description h2 {
        margin: 0.2em 0;
      }

      .small {
        font-size: 12px;
      }

      .justified {
        text-align: justify;
      }

      .smaller {
        font-size: 11px;
      }

      .shaded {
        color: #999;
      }

      .bluelight {
        color: #6b90da;
      }
    </style>
    <script src="static/shared/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/welcome/js/jquery.jcarousel.pack.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js" type="text/javascript"> </script>
    <link rel="stylesheet" href="static/welcome/stylesheets/jquery.jcarousel.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="static/welcome/stylesheets/skin.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" charset="utf-8">
      var current_sample;
      var samples = [
        {type: 'showcase', uri: 'http://rhizospheregwt.appspot.com'},
        {type: 'showcase', uri: '/showcase/code'},
        {type: 'ds', uri: 'sample/picasa.js'},
        {type: 'ds', uri: 'sample/factbook.js'},
        {type: 'ds', uri: 'sample/people.js'},
        {type: 'ds', uri: 'sample/books.js'},
        {type: 'ds', uri: 'sample/usa.js'}
      ];

      function go(sample, simulate_id, debug_id, experimental_id) {
        if (sample.type == 'showcase') {
          document.location.href = sample.uri;
          return;
        }
        var simulate = document.getElementById(simulate_id).value;
        var forceParams = '';
        if (simulate == 'mobile') {
          forceParams = '&platform=mobile&device=ipad';
        }
        var url = 'rhizo.html?d=' +
            (document.getElementById(debug_id).checked ? '1' : '0') +
            '&exp=' +
            (document.getElementById(experimental_id).checked ? '1' : '0') +
            forceParams +
            '&source=' + encodeURIComponent(sample.uri);
        var windowName = 'rhizosphere';
        var windowFeatures = 'status=0,toolbar=0,location=0,menubar=0,resizable=1,scrollbars=1,';
        windowFeatures += (simulate == 'small' ? "height=300,width=350" : "height=700, width=1000");
        window.open(url, windowName, windowFeatures);
        return false;
      }

      jQuery(document).ready(function() {
        jQuery('#carousel').jcarousel({
          visible: 1,
          scroll: 1,
          start: 1,  // force start on the Google Code showcase
          wrap: 'both',
          itemVisibleInCallback: {
            onBeforeAnimation: function(carousel, item, index, state) {
              $('.carousel-description').not('#desc-' + index).fadeOut();
            },
            onAfterAnimation: function(carousel, item, index, state) {
              $('#desc-' + index).fadeIn();
              current_sample = samples[index-1];
              if (current_sample.type == 'ds') {
                $('.try-rhizosphere-options').fadeIn();
              } else {
                $('.try-rhizosphere-options').fadeOut();
              }
            }
          }
        });
        $('.try-rhizosphere-link').click(function() {
          go(current_sample, 'simulate', 'debug', 'experimental');
        });
        $('#try-your-own').submit(function() {
          return go({type: 'ds', uri: $('#source').val()},
                    'try-your-own-simulate',
                    'try-your-own-debug',
                    'try-your-own-experimental');
        });
        $('#try-learn').click(function() {
          $('#try-learn-contents').show('fast');
          $('#source').focus();
          return false;
        });
        $('#try-watch').click(function() {
          $('#try-watch-contents').show('fast');
          return false;
        });
        $('#try-explore').click(function() {
          $('#try-explore-contents').show('fast');
          return false;
        });
        $('#try-advanced').click(function() {
          $('#try-advanced-contents').show('fast');
          return false;
        });
      });
    </script>
    {% include "ga.html" %}
  </head>
  <body>
    <div style="margin:auto; width: 920px; margin-top: 10px; margin-bottom: 5px;">
      <h1 style="text-align:right; height: 50px">
        <a href="http://sites.google.com/site/rhizosphereui">
          <img src="static/shared/img/rhizosphere_logo.png" style="float:left; vertical-align:text-bottom; border: 1px solid #6b90da">
        </a>
        Rhizosphere<span class="bluelight">!</span>
      </h1>
      <div class="contents">
        <p class="small" style="padding-left: 40px;">
          <a style="color: #000" href="http://www.youtube.com/watch?v=NwVBzx0LMNQ">Minority Report</a>
          <span class="bluelight"><strong>can</strong></span> happen in a browser.
          <a href="http://sites.google.com/site/rhizosphereui">Learn more</a>.
        </p>
        <ul id="carousel" class="jcarousel-skin-tango">
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/gwtshowcase.png" border="0">
            </a>
          </li>
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/bugs_plain.png" border="0">
            </a>
          </li>
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/picasa.png" border="0">
            </a>
          </li>
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/factbook.png" border="0">
            </a>
          </li>
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/people.png" border="0">
            </a>
          </li>
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/books.png" border="0">
            </a>
          </li>
          <li>
            <a href="#" class="try-rhizosphere-link">
              <img src="static/welcome/img/usa.png" border="0">
            </a>
          </li>
        </ul>
        <div style="float:right; margin: 0 40px 0 10px; padding-top: 10px">
          <a href="#" class="try-rhizosphere-link">
            <img src="static/welcome/img/try.png" alt="Try Rhizosphere" border="0">
          </a>
          <div class="try-rhizosphere-options" style="display: none">
            <label for="simulate" class="smaller shaded">Simulate</label>
            <select name="simulate" id="simulate" class="smaller">
              <option value="">-</option>
              <option value="mobile">Mobile device</option>
              <option value="small">Small rendering</option>
            </select><br />
            <input type="checkbox" name="debug" id="debug">
            <label for="debug" class="smaller shaded">Debug mode</label><br />
            <input type="checkbox" name="experimental" id="experimental" checked="checked">
            <label for="experimental" class="smaller shaded">Experimental features</label>
          </div>
        </div>
        <div id="desc-1" class="carousel-description">
          <h2>Rhizosphere <span class="bluelight">GWT integration</span></h2>
          <p>
            Use Rhizosphere in Google Web Toolkit applications.<br />
          <span class="shaded">
            All Rhizosphere features on top of the GWT UI stack. Try the GWT demos.
          </span>
          </p>
        </div>
        <div id="desc-2" class="carousel-description">
          <h2>Google Code <span class="bluelight">Issue tracking</span></h2>
          <p>
            Project tracking made easy. Don't get overwhelmed by your bugs.<br />
          <span class="shaded">
            Slice'n'dice according to multiple metrics: author, priority, severity
            and many more.
          </span>
          </p>
        </div>
        <div id="desc-3" class="carousel-description">
          <h2>Picasa<span class="bluelight">.js</span></h2>
          <p>
            Simple photo browsing and picture organizer.<br />
          <span class="shaded">
            Drag pictures around, group them to your liking, magnify the
            interesting ones.
          </span>
          </p>
        </div>
        <div id="desc-4" class="carousel-description">
          <h2>Factbook<span class="bluelight">.js</span></h2>
          <p>
            Powerful and dynamic Treemaps.<br />
          <span class="shaded">
            Explore a selection of the CIA Factbook via powerful treemaps
            that dynamically change based on your refinements.
          </span>
          </p>
        </div>
        <div id="desc-5" class="carousel-description">
          <h2>People<span class="bluelight">.js</span></h2>
          <p>
            Organizational charts, family trees and contacts management.<br />
          <span class="shaded">
            Try the hierarchical layout and see how it reacts to dynamic filtering.
          </span>
          </p>
        </div>
        <div id="desc-6" class="carousel-description">
          <h2>Books<span class="bluelight">.js</span></h2>
          <p>
            A renewed shopping experience.<br />
          <span class="shaded">
            Use the filters to find the book you've been always looking for.
          </span>
          </p>
        </div>
        <div id="desc-7" class="carousel-description">
          <h2>Usa<span class="bluelight">.js</span></h2>
          <p>
            A new way to explore geography, politics and navigate through
            complex data.<br />
          <span class="shaded">
            Too much data on screen? Click the panning icon to activate the
            endless desktop.
          </span>
          </p>
        </div>
        <div style="clear:both"></div>
      </div>
      <div class="contents more">
        <div> <!-- Try Your Own -->
          <img src="static/welcome/img/tryyourown.png" style="float:left; margin-right: 15px">
          <p>
            <strong>Try your own</strong><br />
            <span class="shaded">
              Try Rhizosphere with your custom javascript file or model.
              <a href="#" id="try-learn">Learn more</a>
            </span>
            <div id="try-learn-contents" class="detail-contents">
              <form id="try-your-own" >
                <table>
                  <tr>
                    <td><span style="font-size: 24px">Datasource:</span></td>
                    <td>
                      <input type="text" name='source' id="source" style="font-size: 24px; width: 500px">
                      <input type="submit" value="Go" style="font-size: 24px" />
                    </td>
                  </tr><tr valign="top">
                    <td>
                      <input type="checkbox" name="try-your-own-debug" id="try-your-own-debug">
                      <label for="try-your-own-debug" class="smaller shaded">Debug Mode</label><br />
                      <input type="checkbox" name="try-your-own-experimental" id="try-your-own-experimental" checked="checked">
                      <label for="try-your-own-experimental" class="smaller shaded">Exp. features</label><br />
                      <select name="try-your-own-simulate" id="try-your-own-simulate" class="smaller">
                        <option value="">No simulation</option>
                        <option value="mobile">Mobile device</option>
                        <option value="small">Small rendering</option>
                      </select>
                    </td><td>
                      <span class="smaller shaded"><strong>Example:</strong> sample/people.js</span>
                      <p class="small justified">
                        Rhizosphere can load the data to visualize from many sources,
                        such as <em>custom javascript files</em> or
                        <a href="http://code.google.com/apis/visualization/">Google Visualization</a> datasources.
                        It also has many additional features. Give these a try:
                      </p>
                      <ul class="small">
                        <li><a href="rhizo.html?source=sample/many.js" target="_blank">many.js</a>:
                          thousand of elements on screen!</li>
                        <li><a href="rhizo.html?source=sample/autorender.js" target="_blank">autorender.js</a>:
                          Legend and color coding for yeour items.</li>
                        <li><a href="rhizo.html?source=http%3A%2F%2Fspreadsheets.google.com%2Ftq%3Frange%3DA1%3AK14%26headers%3D-1%26key%3D0Av88pFrCTjLhcC1JRXlYN25nME9DOU5fVTdxRWlfVnc%26gid%3D0" target="_blank">
                          Phone prices</a>: load contents from
                          <a href="http://spreadsheets.google.com/ccc?key=0Av88pFrCTjLhdGZzYlhEMkxZUmhZbUNfU1JLU3JlWEE&hl=en_GB" target="_blank">this spreadsheet</a>
                          via Google Visualization API.</li>
                        <li><a href="http://spreadsheets.google.com/ccc?key=0Av88pFrCTjLhcC1JRXlYN25nME9DOU5fVTdxRWlfVnc&hl=en_GB&waffle=false&forced=true#gid=0" target="_blank">Spreadsheet Gadget</a>:
                          Use Rhizosphere directly within the spreadsheet!</li>
                      </ul>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </p>
          <div style="clear:both"></div>
        </div>
        <div>  <!-- Watch -->
          <img src="static/welcome/img/watch.png" style="float:left; margin-right: 15px">
          <p>
            <strong>Watch</strong><br />
            <span class="shaded">
              Take a look at Rhizosphere videos and screencasts.
              <a href="#" id="try-watch">Learn more</a>
            </span>
            <div id="try-watch-contents" class="detail-contents">
              <p>A quick 30 secs demo:</p>
              <center>
                <object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/q-N_dNFmr6c&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/q-N_dNFmr6c&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed></object>
              </center>
              <p>Way longer full overview (grab a cup of tea):</p>
              <center>
                <object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/oj6Z7C5Hqu0&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/oj6Z7C5Hqu0&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
              </center>
              <p>Still interested? We have <a href="http://sites.google.com/site/rhizosphereui/Home/videos">more videos.</a>
            </div>
          </p>
          <div style="clear:both"></div>
        </div>
        <div> <!-- Explore -->
          <img src="static/welcome/img/explore.png" style="float:left; margin-right: 15px">
          <p>
            <strong>Explore</strong><br />
            <span class="shaded">
              Discover Rhizosphere and contribute to its development.
              <a href="#" id="try-explore">Learn more</a>
            </span>
            <div id="try-explore-contents" class="detail-contents">
              <p class="small justified">
                Rhizosphere is <strong>open source</strong>!
                You can reuse Rhizosphere code in your projects or contribute to
                its development. Here are some links to get started:
                <ul class="small">
                  <li>Learn more about the <a href="http://sites.google.com/site/rhizosphereui">Rhizosphere project</a></li>
                  <li>Take a look at the <a href="http://code.google.com/p/rhizosphere">source code</a></li>
                  <li><a href="http://twitter.com/rhizosphere">Follow Rhizosphere</a> on Twitter
                    <a href="http://twitter.com/rhizosphere">
                      <img src="static/welcome/img/twitter_icon.gif" style="vertical-align:middle; border: 0;">
                    </a>
                  </li>
                </ul>
              </p>
            </div>
          </p>
          <div style="clear:both"></div>
        </div>
        <div> <!-- Advanced -->
          <img src="static/welcome/img/advanced.png" style="float:left; margin-right: 15px">
          <p>
            <strong>Advanced</strong><br />
            <span class="shaded">
              Play with Rhizosphere advanced and less common features..
              <a href="#" id="try-advanced">Learn more</a>
            </span>
            <div id="try-advanced-contents" class="detail-contents">
              <p class="small justified">
                Here is a selection of advanced features:
                <ul class="small">
                  <li><strong><a href="multi.html">Multisphere</a></strong>:
                    Embed multiple Rhizosphere instances in a single webpage.</li>
                  <li><strong><a href="google_visualization.html">
                    Google Visualization API</a></strong>:
                    Use Rhizosphere as a standard Google Visualization APIs.
                  </li>
                </ul>
              </p>
            </div>
          </p>
          <div style="clear:both"></div>
        </div>
      </div>
      <div class="contents more">
        <p class="small">
          Rhizosphere supports the following browsers:
          <span class="shaded">
            <img src="static/welcome/img/chrome.png"> Google Chrome
            <img src="static/welcome/img/firefox.png"> Mozilla Firefox
            <img src="static/welcome/img/safari.png"> Safari
            <img src="static/welcome/img/opera.png"> Opera
          </span><br />
          Using Internet Explorer? Please install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a>.
        </p>
        <p class="smaller">
          Crystal Icons by <a href="http://www.everaldo.com/crystal/">Everaldo</a>.
          Carousel by <a href="http://sorgalla.com/jcarousel/">JCarousel</a>.
        </p>
      </div>
      <script>
       CFInstall.check();
      </script>
  </body>
</html>
